<template>
  <h1>Order</h1>
  <h1 v-text="productName"></h1>
</template>

<script>
import {useRoute} from "vue-router";
import {computed, reactive, ref} from "vue";

export default {
  name: "Order",
  setup() {
    console.log(useRoute().params.id);
    const orders = reactive([
      {
        id: '1',
        productName: '商品1'
      },
      {
        id: '2',
        productName: '商品2'
      },
      {
        id: '3',
        productName: '商品3'
      },
      {
        id: '4',
        productName: '商品4'
      },
      {
        id: '5',
        productName: '商品5'
      },
    ]);
    const productName = ref(computed(function () {
      for (const order of orders) {
        if (order.id === useRoute().params.id) {
          return order.productName;
        }
      }
    }));
    console.log(productName.value);
    return {
      productName
    }
  }
}
</script>

<style scoped>

</style>